//	公开分享设置modal

import React, { CSSProperties, useCallback, useEffect, useState } from 'react';
import { Modal, Form, Radio, Input } from 'antd';
import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';
import { getShareConfig } from 'src/services/AnalyseManage';

interface IProps {
	shareModalVisible: boolean;
	handleOk: ( type, password ) => void;
	handleCancel: () => void;
	pageId: string;
}

const ShareModal = ( props: IProps ) => {
	const [ shareStatus, setShareStatus ] = useState( '0' );
	const [ options ] = useState( [
		{ label: '停止分享', value: '0' },
		{ label: '公开分享', value: '1' },
		{ label: '加密公开分享', value: '2' }
	] );

	const [ shareLink, setShareLink ] = useState( '' );

	const [ password, setPassword ] = useState( '' );

	const onChange = ( e ) => {
		setShareStatus( e.target.value );
	};
	const handleInput = ( e ) => {
		setPassword( e.target.value );
	};
	const radioStyle = {
		display: 'flex',
		flexDirection: 'column'
	} as CSSProperties;

	const getConfig = useCallback( async () => {
		const data = await getShareConfig( { pageId: props.pageId } );
		const info = data.data.data;
		setShareStatus( info.type );
		setPassword( info.password );
		setShareLink( ( info.address && info.code ) ? `${ data.data.data?.address }/${ data.data.data?.code }` : '' );
	}, [ props.pageId ] );

	useEffect( () => {
		getConfig();
	}, [ getConfig ] );

	return (
		<Modal
			title="公开分享"
			visible={ props.shareModalVisible }
			okText="确定"
			cancelText="取消"
			onOk={ () => props.handleOk( shareStatus, password ) }
			onCancel={ props.handleCancel }
		>
			<Form layout='vertical'>
				<Form.Item label='分享状态'>
					<Radio.Group style={ radioStyle } options={ options } onChange={ onChange }
											 value={ shareStatus }></Radio.Group>
				</Form.Item>

				{
					shareStatus === '2' && (
						<Form.Item label='密码'>
							<Input.Password
								value={ password }
								placeholder="请输入密码"
								onChange={ handleInput }
								iconRender={ visible => visible ? <EyeTwoTone/> : <EyeInvisibleOutlined/> }
							/>
						</Form.Item>
					)
				}
				{
					shareLink && shareStatus !== '0' && (
						<Form.Item label='当前分享链接'>
							<a href={ shareLink } rel="noopener noreferrer" target='_blank'>{ shareLink }</a>
						</Form.Item>
					)
				}
			</Form>
		</Modal>
	);
};

export default React.memo( ShareModal );
